<script setup lang="ts">
import { defineEmits } from 'vue'
interface Props {
  imageUrl: string
  text?: string
  title: string
  description?: string
  count?: number
}
const props = defineProps<Props>()
const emit = defineEmits(['add', 'subtract'])
</script>

<template>
  <div class="flex flex-row">
    <div class="image">
      <img :src="imageUrl" :alt="text" class="w-20 h-20">
    </div>

    <div class="w-full flex flex-row justify-between">
      <div class="w-full h-auto flex flex-col justify-around pl-2.5">
        <div class="flex flex-row justify-between">
          <div class="text-xl font-bold">
            {{ title }}
          </div>
        </div>

        <div class="text-xs w-full flex flex-row justify-between items-center text-gray-500">
          {{ text }}
        </div>
        <div class="text-xs w-full flex flex-row justify-between items-center text-gray-500">
          {{ description }}
        </div>
      </div>
      <div class="h-full flex items-center justify-center">
        <el-icon @click="emit('subtract')" :disabled="!count || count <= 0"><Minus /></el-icon>
        <span style="margin: 0 8px;">{{ count || 0 }}</span>
        <el-icon @click="emit('add')"><Plus /></el-icon>
      </div>
    </div>

  </div>

</template>
